<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>

	<title>商品详情页</title>
	<meta http-equiv="Content-Type" content="test/html;charset=utf-8"/>
	<link rel="shortcut icon" href="${pageContext.request.contextPath}/images/favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css" >
	<script type="text/javascript" src="../js/jquery-2.1.1.js"></script>	
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/goodsDetail.js"></script>
    
    <style type="text/css">
    
    .foot{
        margin-top:10px;
        width:80%;
        margin-left:10%;
        margin-right:10%;
        border-style: solid;
    }
    
    .data{
        margin-top:5px;
        margin-bottom:5px;
    }
    
    .head{
        border:1px;
        width:100%;
        border-style:solid;
    }
    
    .leftbody{
        width:40%;
        float:left;
        margin-top:10px;
        margin-bottom:10px;
        margin-left:10%;
    }
    
    .rightbody{
        width:40%;
        float:right;
        margin-top:10px;
        margin-bottom:10px;
        margin-left:1%;
        margin-right:9%;
    }
    
    .leftName{
        width: 50%;
        padding-right: 10%;
    }
    .rightValue{
        width: 50%;
        padding-left: 10%;
    }
    
    </style>
    
</head>
<body>
	<div class="head" align="center">
		
		<div class="col-md-12 column" style="padding-left:0;padding-right:0;">
			<div class="carousel slide" id="car">
				
				<ol class="carousel-indicators">
					<li class="active" data-slide-to="0" data-target="#car"></li>
					<li data-slide-to="1" data-target="#car"></li>
					<li data-slide-to="2" data-target="#car"></li>
				</ol>
				
				<div class="carousel-inner" >
					<div class="item active" >
						<img alt="" src="../images/sale-goods-id/iphone.jpg" style="height:150px"/>
						<div class="carousel-caption">
						</div>
					</div>
					
					<div class="item">
					<!-- 
						<img alt="" src="../images/sale-goods-id/iphone.jpg" style="height:150px"/>
						 -->
						<img src="../images/sale-goods-id/iphone.jpg" style="height:150px"/>
						<div class="carousel-caption">
						</div>
					</div>
					
					<div class="item">
						<img alt="" src="../images/sale-goods-id/iphone.jpg" style="height:150px"/>
						<div class="carousel-caption">
						</div>
					</div>
				</div> 
			   <a class="left carousel-control" href="#car" data-slide="next">
				 	  <!--<span class="glyphicon glyphicon-chevron-left"></span>-->
			   </a> 
			   <a class="right carousel-control" href="#car" data-slide="prev">
			   		<!--<span class="glyphicon glyphicon-chevron-right"></span>-->
			   </a>
			   
			</div>	
		</div>
		
	</div>

	<div>
		<div class="leftbody" align="center">

			<div class="col-md-12 column" style="padding-left:0;padding-right:0;">
				<div class="carousel slide" id="good">					
					<div class="carousel-inner" >
						<div class="item active" >
							<img alt="" src="${pageContext.request.contextPath }/images/${goods.icon}" style="height:440px;"/>
							<div class="carousel-caption">
							</div>
						</div>
						
						<div class="item">
							<img alt="" src="${pageContext.request.contextPath }/images/${goods.icon}" style="height:440px;"/>
							<div class="carousel-caption">
							</div>
						</div>
						
						<div class="item">
							<img alt="" src="${pageContext.request.contextPath }/images/${goods.icon}" style="height:440px;"/>
							<div class="carousel-caption">
							</div>
						</div>
					</div> 
				   <a class="left carousel-control" href="#good" data-slide="next">
				   </a> 
				   <a class="right carousel-control" href="#good" data-slide="prev">
				   </a>			   
				</div>
			</div>


			<!--
			<div style="border:1px;height:440px;border-style:solid;">
				<img src="iphone.jpg">
			</div>
			
			<div style="border:1px;width:100%;height:100px;border-style:solid;">
				<div style="border:1px;width:14%;height:90px;border-style:solid;float:left;margin-left:5%;margin-top:5px;">
					缩略图
				</div>
				<div style="border:1px;width:14%;height:90px;border-style:solid;float:left;margin-left:5%;margin-top:5px;">
					缩略图
				</div>
				<div style="border:1px;width:14%;height:90px;border-style:solid;float:left;margin-left:5%;margin-top:5px;">
					缩略图
				</div>
				<div style="border:1px;width:14%;height:90px;border-style:solid;float:left;margin-left:5%;margin-top:5px;">
					缩略图
				</div>
				<div style="border:1px;width:14%;height:90px;border-style:solid;float:left;margin-left:5%;margin-top:5px;">
					缩略图
				</div>
			</div>
			-->
		</div>

		<div class="rightbody" align="center" >
			<div align="left" style="background-color:#EDEDED;padding-top:10px;padding-left:10px;">
				<div>
					商品大致简介：
					<p style="margin-left:40px;">
						现货速发/送壳膜Apple/苹果 iPhone 6 Plus 全网通 4G版 5.5英寸			
					</p>
					<p style="margin-left:40px;">
						送壳+钢化膜 分期0首付 原封国行
					</p>
				</div>
				<div style="padding-bottom:10px;">					
					<p style="display:inline;">	
					        价格:
					    <font color="red" size="5em" >￥</font>				   
						<font color="red" size="5em" id="single_price">${saleGoods.price}</font>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						可售库存：
						<font id="saleSum" color="red" size="5em">${saleGoods.saleSum}</font>件
					</p>
				</div>
			</div>
            <form id="form" action="../goods/buy" method="post">
			<div align="left" style="padding-left:70px;">		
				<!-- <div class="data">
					颜色：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<font color="red" size="3em">白色</font>
				</div> -->
				<div class="data">
					内存容量：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<font color="red" size="3em">${goods.rom }G</font>
				</div>
				<div class="data">
					手机容量：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<font color="red" size="3em">${goods.ram }G</font>
				</div>	
				<div class="data">
					购买数量：					
					<input type="button" id="sub" value="-">
					<input type="text" id="userSum" name="userSum" value="0" size="5">
					<input type="button" id="add" value="+">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<font color="red" size="4em">总价:￥</font>
					<font color="red" size="5em" id="total_price">0.0</font>
				</div>
			</div>
			<div style="margin-top:20px;margin-bottom:20px;">
			    <input hidden="true" name="id" value="${sale_goods_id}">
			    <input hidden="true" name="single_price" value="${saleGoods.price }">
				<input id="justbuy" type="button" value="立即购买" style="width:35%;height:40px;background-color:pink;font-size: large;"/>
				<!-- <input id="add2bus" type="button" value="加入购物车" style="width:35%;height:40px;color:white;background-color:red;margin-left:5%;font-size: large;"/> -->
			</div>
			</form>
		</div>
	</div>

	<%
		String path = request.getContextPath();
		String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	%>

	<div class="foot" align="center" style="clear:both;">
	    <h3>手机参数详情</h3>
	    <%-- 
	    <c:forEach items="" var="">
	       
	    </c:forEach>
	    --%>
	    <table border="1" style="border-color: green;border-bottom-style:solid; border-top-style:solid; background-color: yellow;width: 60%;">
	           <tr >
	               <td class="leftName" align="right" >商品名</td>
	               <td class="rightValue" >${goods.goodsName }</td>
               </tr>
               <tr>
                   <td class="leftName" align="right" >版本</td>
                   <td class="rightValue" >${goods.version }</td>
               </tr>
               <tr>
                   <td class="leftName" align="right">屏幕尺寸</td>
                   <td class="rightValue">${goods.screenSize }</td>
               </tr>
               <tr>
                   <td class="leftName" align="right">RAM</td>
                   <td class="rightValue">${goods.ram }</td>
               </tr>
               <tr>
                   <td class="leftName" align="right">ROM</td>
                   <td class="rightValue">${goods.rom }</td>
               </tr>
               <tr>
                   <td class="leftName" align="right">上市时间</td>
                   <td class="rightValue">${goods.timeMarket }</td>
               </tr>
               <tr>
                   <td class="leftName" align="right">原图</td>
                   <td class="rightValue" style="">${goods.icon }</td>
               </tr>	            
	    </table>
	    
	    
	    
	    
	    
		<%-- <img  src="./pic/586cc0e7N4c95ae7f.jpg">--%>
		<img  src="<%=basePath %>/images/sale-goods-id/586cc0e7N4c95ae7f.jpg">
	</div>
	
	<div class="foot" align="center" style="background-color:#b0e0e6;">
		 <img  src="../images/sale-goods-id/58057fbcNe7a289f3.jpg">	
		<%--<img  src="<%=basePath%>${p.path}/${p.name}">--%>
	</div>
	</body>
</html>